<template>
	<div class="option">
		<!-- 单选 -->
		<span class="key" v-if="isShowSeq">{{ item.optionSeq }}</span>
		<el-input :disabled="disabled" v-model.trim="item.answerOption" :maxlength="maxLength">
			<i
				v-if="isEditor"
				slot="suffix"
				@click.stop="handleEdit(item.answerOption)"
				class="el-icon-edit-outline icons"
			/>
		</el-input>
		<div class="option-btn">
			<div class="option-btn-item" v-if="isAdd" @click="add(index)">
				<img class="title-icon" src="@rc/assets/images/icon-add.png" alt="">
				<el-button
					class="add-btn"
					type="text"
				>
					添加选项
				</el-button>
			</div>

			<div v-if="isDel" @click="del(index)">
				<img class="title-icon" src="@rc/assets/images/icon-del.png" alt="">
				<el-button
					class="add-btn del"
					type="text"
					@click="del(index)"
				>
					删除选项
				</el-button>
			</div>
			<el-button
				class="add-btn clear"
				v-if="!isDel && (index !==0 || index === 1) "
				type="text"
			/>
		</div>
	</div>
</template>
<script>
export default {
    name:'select-options',
    props:{
        // 选项
        value:{
            type:Object,
            default:()=>{
                return {};
            },
        },
        // 下标值
        index:{
            type:Number,
            default:0
        },//是否禁用
        disabled:{
           type:Boolean,
           default:false
        },
        //控制显示删除选项按钮
        isDel:{
           type:Boolean,
           default:false
        },
        isAdd:{
           type:Boolean,
           default:false
        },
        // 是否显示序号
        isShowSeq:{
            type:Boolean,
           default:true
        },
        //是否显示编辑按钮
        isEditor:{
            type:Boolean,
           default:true
        },
        //输入框字符限制
        maxLength:{
            type:Number,
            default:-1
        }
    },
    watch:{
        value:{
            deep:true,
            immediate:true,
            handler(val){
                this.item = val;
            }
        }
    },
    data(){
        return {
            item:{}
        };
    },
    methods:{
        /**
         * 添加选项
         */
        add(){
            this.$emit('add');
        },
        /**
         * 删除选项;最后一项显示删除，只保留两个选项
         */
        del(index){
            this.$emit('del',index);
        },
        // 编辑
        handleEdit(value){
            this.$emit('edit',value,'optionList',this.index);
        }
    }

};
</script>
<style scoped lang="less">
.add-btn{
    margin: 0 10px;
    &.del{
        color: #666!important;
    }
}
.m-t15{
    margin-top: 15px;
}
.icons{
    cursor: pointer;
    font-size: 20px;
    margin-top: 7px;
}
.option{
    display: flex;
    flex: 1;
    align-items: center;
    .key{
        min-width: 20px;
    }
    .option-btn{
        width: 120px;
        box-sizing: border-box;
        padding: 0 10px;
        flex-shrink: 0;
        .option-btn-item{
            height: 20px;
        }
        >div{
           cursor: pointer;
           width: 100%;
           display: flex;
           align-items: center;
        }
    }
}
.clear{
    min-width: 50px;
}
</style>
